<template>
  <!-- 右侧组件按钮 -->

  <div
    class="component-list"
    @dragstart="handleDragStart"
  >
    <div
      v-for="(item, index) in componentList"
      :key="index"
      class="list"
      :data-index="index"
       v-if="item.type == ClassificationType"
      draggable
    >
      <div  @click="showDialog(item)" style="position:relative;">
        <span class="iconfont" :class="'icon-' + item.icon"></span>
        <span>{{ item.label }}</span>
        <i @click="delCustom(item)" v-if="item.type=='custom'" class="el-icon-circle-close close_custom"></i>
      </div>
    </div>
 


        <!-- 弹框区域 -->
        <el-dialog
        title="添加模块"
        :visible.sync="dialogVisible"
        v-dialogDrag
        v-if="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        append-to-body
        width="950px"
        >
        <component
        :componentId="componentId"
        @closeTK="closeTK"
        :componentList="componentList"
        :is="componentId">
        </component>
        </el-dialog>
    </div>
</template>

<script>
import api from "../api/models/api";
import componentList from "@/custom-component/component-list";
import ImgTextVue from "./Dialog/ImgText.vue";
import ArticleList from "./Dialog/ArticleList.vue"
import ListDialog from "./Dialog/ListDialog.vue"
import AtlasDialog from "./Dialog/AtlasDialog.vue"
import Vimgae from "./Dialog/Vimgae.vue"
import WalkSwiper from "./Dialog/WalkSwiper.vue"
import OnlinevideoDialog from "./Dialog/OnlinevideoDialog.vue"
import Footer from "./Dialog/Footer.vue"
import customButton from "./Dialog/customButton.vue"
import Vinput from "./Dialog/Vinput.vue"
import RectShape from "./Dialog/RectShape"
import VText from "./Dialog/VText.vue"
import Header from "./Dialog/Header.vue"
import FromSubmit from "./Dialog/FromSubmit.vue"
import Advantage from "./Dialog/Advantage.vue"
import Listcard from "./Dialog/Listcard.vue"
import Casecard from "./Dialog/Casecard.vue"
import TabSwitchcard from "./Dialog/TabSwitchcard.vue"
import Hover from "./Dialog/Hover.vue"
import TabImgSwitchcard from "./Dialog/TabImgSwitchcard.vue"
import MobileHeader from "./mobileDialog/MobileHeader.vue"
import MobileFooter from "./mobileDialog/MobileFooter.vue"
import MobileFrom from "./mobileDialog/MobileFrom.vue"
import MobileSwitchcard from "./mobileDialog/MobileSwitchcard.vue"
import MobileScrollX from "./mobileDialog/MobileScrollX.vue"


export default {
    props:[
        "ClassificationType"
    ],
    components:{
      TabImgSwitchcard,
        ImgTextVue,
        Vimgae,
        Vinput,
        RectShape,
        VText,
        customButton,
        ArticleList,
        ListDialog,
        AtlasDialog,
        WalkSwiper,
        OnlinevideoDialog,
        Footer,
        Header,
        FromSubmit,
        Advantage,
        Casecard,
        TabSwitchcard,
        Listcard,
        MobileHeader,
        Hover,
        MobileFooter,
        MobileSwitchcard,
        MobileFrom,
        MobileScrollX,
    },
  data() {
    return {
      componentList,
      componentId:'',
      dialogVisible:false
    };
  },
  methods: {
    showDialog(item){
        if(item.isDialog&&item.type!='CommonlyUsed'){
            this.componentId=item.propValue.value
            this.dialogVisible=true
        }else if(item.isDialog&&item.type=='CommonlyUsed'){
           this.componentId=item.propValue.name?item.propValue.name:item.props.name
            this.dialogVisible=true
        }
    },
    closeTK(){
      this.dialogVisible=false
      this.$EventBus.$emit('CLOSEMENU', false)
    },
    delCustom(item){
      console.log(item.label)
     let Global_Custom=JSON.parse(localStorage.getItem('Global_Custom_components')) 
     for(let key of Global_Custom){
          if(key.componentsAutomaticallyName==item.label){
                  this.$confirm('此操作将删除该组件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  api.deleteComponentsAutomatically({id:key.id}).then(res=>{
                    if(res.code==200){
                      this.$message.success(res.data||res.message)
                    }else{
                      this.$message.error(res.msg||res.message)
                    }
                  })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
          }
     }

       
    },
    handleDragStart(e) {
      console.log(e)
      e.dataTransfer.setData("index", e.target.dataset.index);
    },
  },
};
</script>

<style lang="scss" scoped>
.component-list {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  padding: 10px;
  background: #fff;

  .list {
    width:31%;
   display: flex;
    margin-left: 5px;
   >div{
    border: 1px solid #ddd;
    width: 100%;
    cursor: grab;
    font-size: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    text-align: center;
    color: #333;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
   }
    &:active {
      cursor: grabbing;
    }

    .iconfont {
      margin-right: 4px;
      font-size: 20px;
    }

    .icon-wenben,
    .icon-tupian {
      font-size: 18px;
    }
  }
}
.close_custom{
  position: absolute;
  top:-3rem;
  background: #fff;
  right:-5rem;
  cursor: pointer;
  font-size: 18rem;
}
</style>
